<html>
    <head>
        <meta charset="utf-8">
        <title>使用</title>
        <style>
            /* 定义一个样式 */
            .red {
                color: red;
            }
            .blue {
                color: blue;
            }
        </style>
    </head>
    <body>
        <script src="jquery-3.7.1.min.js"></script>

        <h1 id="testH1" class="red">你好</h1>
        <h1 id="testH2" style="color:green;">你好</h1>

    </body>

    <script>
        /*
            jQuery 操作css
            1. 获取样式
                1.1 获取行内样式
                1.2 获取样式表样式

                    方法
                        attr()  获取行内样式    attr("style")
                        css()   获取样式表样式

                        attr("class") 获取元素的样式名
                        attr("class","样式名") 添加元素的样式 原本的样式会保留 如果出现相同样式则以后面的为准
                        addClass("样式名") 添加样式
                        css() 添加具体的样式（添加的是行样式 优先级最高）
                        css("具体样式名称","样式值")
                        css({"样式名称":"样式值"})
                        removeClass("样式名") 删除样式
                        toggleClass("样式名") 切换样式
                        hasClass("样式名") 判断是否拥有样式
                        val() 获取文本框的值
                        val("新值") 设置文本框的值



            2. 设置样式
                2.1 设置行内样式
                2.2 设置样式表样式

            3. 删除样式
                3.1 删除行内样式
                3.2 删除样式表样式
        */

        // 1. 获取样式

        // 1.1 获取行内样式
        var inlineStyle = $("#testH2").attr("style");
        console.log("获取行内样式: " + inlineStyle); // 输出: color:green;

        // 1.2 获取样式表样式
        var computedStyle = $("#testH1").css("color");
        console.log("获取样式表样式: " + computedStyle); // 输出: rgb(255, 0, 0) (红色)

        // 获取元素的样式名
        var className = $("#testH1").attr("class");
        console.log("获取元素的样式名: " + className); // 输出: red

        // 2. 设置样式

        // 2.1 设置行内样式
        $("#testH1").css("color", "purple"); // 直接设置行内样式
        console.log("设置后的行内样式: " + $("#testH1").css("color")); // 输出: rgb(128, 0, 128) (紫色)

        // 2.2 设置样式表样式
        $("#testH2").addClass("blue"); // 添加样式类
        console.log("添加样式后: " + $("#testH2").attr("class")); // 输出: blue

        // 使用css()方法设置多个样式
        $("#testH2").css({
            "font-size": "24px",
            "background-color": "yellow"
        },{"color":"yellow"});

        // 3. 删除样式

        // 3.1 删除行内样式
        $("#testH2").removeAttr("style"); // 移除行内样式
        console.log("移除行内样式后: " + $("#testH2").attr("style")); // 输出: null

        // 3.2 删除样式表样式
        $("#testH1").removeClass("red"); // 移除样式类
        console.log("移除样式类后: " + $("#testH1").attr("class")); // 输出: 空字符串或其它类名

        // 其他样式操作
        // 切换样式
        $("#testH1").toggleClass("blue"); // 如果没有这个类就添加，如果有就移除
        console.log("切换样式后: " + $("#testH1").attr("class")); // 输出: blue 或 空字符串

        // 判断是否拥有样式
        var hasBlueClass = $("#testH1").hasClass("blue");
        console.log("是否拥有蓝色样式: " + hasBlueClass); // 输出: true 或 false

        // 注意：val() 用于获取和设置表单元素的值，例如 input, textarea, select 等，这里不适用
        // 因为页面中没有表单元素，所以这里不提供 val() 的示例。
    </script>

</html>